<template>
  <div class="lesson-detail">
    <el-skeleton :rows="5" animated v-if="loading" />
    <el-alert v-else-if="error" :title="error" type="error" show-icon :closable="false" />
    <div v-else>
      <el-page-header @back="$router.go(-1)">
        <template #title>
          <span class="lesson-title-btn">返回</span>
        </template>
        <template #content>
          <span class='lesson-title'>{{ lesson.title }}</span>
        </template>
      </el-page-header>

      <div class="learning-modules">
        <!-- <h2>学习模块</h2> -->
        <!-- 添加课程进度条 -->
        <div class="lesson-progress" v-if="lessonProgress !== null" v-show="loggedIn">
          <el-progress :text-inside="true" :percentage="getLessonProgress()" status="warning" :show-text="true"
            :stroke-width="26" />
        </div>

        <el-row :gutter="20">
          <el-col :span="24" style="margin-bottom: 20px;">
            <el-card class="module-card module-dard-main" shadow="hover">
              <div class="module-content">
                <h3>课文学习</h3>
                <div class="button-parent">
                  <p style="width: 100%;">浏览带有同步音频播放的完整文本</p>
                  <el-button type="primary" class="custom-btn"
                    @click="$router.push(`/text-study/${$route.params.coursePath}/${lesson.id}`)">
                    开始
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="8" :xs="24" style="margin-bottom: 20px;">
            <el-card class="module-card module-card-item module-card-2" shadow="hover">
              <div class="module-content">
                <h3>课文回想</h3>
                <p>用翻译优先的方法练习回忆文本</p>
                <div class="button-parent">
                  <el-button type="primary"
                    @click="$router.push(`/text-recall/${$route.params.coursePath}/${lesson.id}`)">
                    开始
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="8" :xs="24" style="margin-bottom: 20px;">
            <el-card class="module-card module-card-item module-card-3" shadow="hover">
              <div class="module-content">
                <h3>句子学习</h3>
                <p>通过录音进行逐句重点学习</p>
                <div class="button-parent">
                  <el-button type="primary"
                    @click="$router.push(`/sentence-study/${$route.params.coursePath}/${lesson.id}`)">
                    开始
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="8" :xs="24" style="margin-bottom: 20px;">
            <el-card class="module-card module-card-item module-card-4" shadow="hover">
              <div class="module-content">
                <h3>单词排列</h3>
                <p>按正确顺序排列单词的互动练习</p>
                <div class="button-parent">
                  <el-button type="primary"
                    @click="$router.push(`/word-arrangement/${$route.params.coursePath}/${lesson.id}`)">
                    开始
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="8" :xs="24" style="margin-bottom: 20px;">
            <el-card class="module-card module-card-item module-card-5" shadow="hover">
              <div class="module-content">
                <h3>听辨练习</h3>
                <p>通过识别单词练习听力理解</p>
                <div class="button-parent">
                  <el-button type="primary"
                    @click="$router.push(`/listen-identify/${$route.params.coursePath}/${lesson.id}`)">
                    开始
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="8" :xs="24" style="margin-bottom: 20px;">
            <el-card class="module-card module-card-item module-card-6" shadow="hover">
              <div class="module-content">
                <h3>词汇练习</h3>
                <p>学习关键词汇和短语</p>
                <div class="button-parent">
                  <el-button type="primary"
                    @click="$router.push(`/vocabulary-practice/${$route.params.coursePath}/${lesson.id}`)">
                    开始
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="8" :xs="24" style="margin-bottom: 20px;">
            <el-card class="module-card module-card-item module-card-1" shadow="hover">
              <div class="module-content">
                <h3>听写练习</h3>
                <p>练习听力和写作技巧</p>
                <div class="button-parent">
                  <el-button type="primary"
                    @click="$router.push(`/dictation-practice/${$route.params.coursePath}/${lesson.id}`)">
                    开始
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <el-dialog v-model="showNotification" :title="notificationDialogTitle" width="30%">
        <span>{{ notificationMessage }}</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="hideNotification">Close</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { ElSkeleton, ElAlert, ElPageHeader, ElCard, ElRow, ElCol, ElButton, ElDialog, ElTag, ElProgress } from 'element-plus'
import { lessonDetailMixin } from '../mixins/lessonDetail.js'

export default {
  name: 'LessonDetail',
  components: {
    ElSkeleton,
    ElAlert,
    ElPageHeader,
    ElCard,
    ElRow,
    ElCol,
    ElButton,
    ElDialog,
    ElTag,
    ElProgress
  },
  mixins: [lessonDetailMixin],
}
</script>

<style scoped>
.lesson-detail {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.lesson-title {
  font-size: 2rem;
  font-weight: bold;
}

.module-dard-main {
  /* background-image:  linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8)),url(/assets/images/lundun.png); */
  background: linear-gradient(135deg, rgba(26, 255, 0, 0.7) 0%, rgba(34, 249, 181, 0.9) 100%), url("/assets/images/lundun.png") !important;
  /*background-color: rgba(255, 123, 0,0.8); /* 黑色半透明（0.5为透明度） */
  /*background-blend-mode: multiply; /* 混合模式：可选（见下方说明） */
  background-size: 100% auto !important;
  background-position-y: -300px !important;
}

.module-dard-main p,
.module-dard-main h3 {
  text-align: center;
}

.learning-modules h2 {
  color: #333;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 2rem;
}

.learning-modules .custom-btn {
  margin-right: 10px;
  background-color: #e6a23c;
  border-color: #e6a23c;
  min-width: 120px;
}

.lesson-progress {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.vocabulary-section,
.sentences-section {
  margin-bottom: 30px;
}

.section-header {
  font-weight: bold;
  font-size: 1.2em;
  color: #333;
}

.vocabulary-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vocabulary-tag {
  cursor: pointer;
  font-size: 1em;
}

.vocabulary-status {
  margin-left: 5px;
  color: #67c23a;
}

.sentences-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sentence-card {
  border: 1px solid #ebeef5;
  transition: all 0.3s;
}

.sentence-card.mastered {
  border-color: #67c23a;
  background-color: #f0f9ff;
}

.sentence-content {
  margin-bottom: 15px;
}

.sentence-text {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 1.1em;
}

.sentence-translation {
  color: #666;
  font-style: italic;
}

.sentence-actions {
  text-align: right;
}

.module-card {
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 80%;
  overflow: hidden;
  position: relative;
}

.module-card-item {
  background-color: #fff;
}

.module-card-1 {
  background-image: url('/assets/images/silhouette-danse-09.svg');
  background-color: #fff3e0;
}

.module-card-2 {
  background-image: url('/assets/images/silhouette-danse-08.svg');
  background-color: #e3f2fd;
}

.module-card-3 {
  background-image: url('/assets/images/silhouette-danse-07.svg');
  background-color: #f3e5f5;
}

.module-card-4 {
  background-image: url('/assets/images/silhouette-danse-06.svg');
  background-color: #e8f5e9;
}

.module-card-5 {
  background-image: url('/assets/images/silhouette-danse-10.svg');
  background-color: #f5f5f5;
}

.module-card-6 {
  background-image: url('/assets/images/silhouette-danse-12.svg');
  background-color: #e3fce8;
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}

.module-content p {
  height: 2rem;
}

.module-content .button-parent {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  gap: 15px;
}

.module-content h3 {
  margin-top: 0;
  color: #333;
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.module-content p {
  color: #666;
  font-size: 0.9em;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .lesson-title {
    font-size: 1rem;
  }

  .lesson-title-btn {
    display: none;
  }
}
</style>
```